<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  
        <title>Railway Official Website</title>
        <link rel="stylesheet" href="css/foundation.css"/>
        <link rel="stylesheet" href="css/normalize.css"/>
        <link rel="stylesheet" href="css/jquery-ui.css" />
        <script src="js/vendor/jquery.js"></script>
        <script src="js/ui/jquery-ui.js"></script>
        <script src="js/vendor/custom.modernizr.js"></script>
        <script src="js/formValidation.js"></script>
    </head>
    <body>
        <div id='overlay' style="display:none; opacity: 0.4;position: fixed;top: 0;left: 0;background-color: black;width: 100%;z-index: 5000;">
            <img src="img/loader.gif" style="opacity:1; position: absolute; top: 50%;left: 50%;margin-left:-16px;
                 margin-top:-16px';"/>
        </div>
        <div>
            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name" onClick="void(0);">
                        <h1><a href="#">Railway Official Website</a></h1>
                    </li>
                    <li class="divider"></li>
                    <li class="toggle-topbar menu-icon">
                        <a href="#"><span>menu</span></a>
                    </li>
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="divider"></li>
                        <li><a href="index.php">Home</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Forum</a></li>
                        <li class="divider"></li>
                        <li><a href="loginPage.php">Login</a></li>
                        <li class="divider"></li>
                    </ul>
                </section>
            </nav>
        </div>
        <div class="row">
            <div id="info" data-alert class="large-8 columns large-offset-2 alert-box" style="display: none">

            </div>
        </div>
        <div class="row" >
            <div class="large-10 columns large-offset-1" id="formdiv">
                <form id="register" name="register" method="post" action="" class="custom">
                    <h3>Member Registration</h3>
                    <hr/>
                    <input type="hidden" name="action" value="register"/>
                    <fieldset>
                        <legend>Account details</legend>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="user" class="inline">Username</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="user" name="user" type="text" placeholder="Enter desired username" onblur="validateUser(this);"/>
                                <small id="userErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="user" class="inline">Password</label>
                            </div>
                            <div class="large-4 columns">
                                <input id="password" name="password" type="password" placeholder="Enter desired password" onblur="checkPassword(this);"/>
                                <small id="passwordErr" class="error" style="display: none"></small>
                            </div>
                            <div class="large-4 columns">
                                <input id="confirm" name="confirm" type="password" placeholder="Enter password again" onblur="matchPassword(this);"/>
                                <small id="confirmErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="email" class="inline">E-mail</label>
                            </div>
                            <div class="large-4 columns">
                                <input id="email" type="text" name="email" placeholder="Enter a valid email" onblur="validateEmail(this);"/>
                                <small id="emailErr" class="error" style="display: none"></small>
                            </div>
                            <div class="large-4 columns">
                                <input id="email2" type="text" name="email2" placeholder="Enter email again" onblur="matchEmail(this);"/>
                                <small id="email2Err" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="question" class="inline">Security Question</label>
                            </div>
                            <div class="large-8 columns">
                                <select id="question" name="question">
                                    <option disabled>Select an option</option>
                                    <option value="What was your childhood nickname?">What was your childhood nickname?</option>
                                    <option value="What street did you live on in third grade?">What street did you live on in third grade?</option>
                                    <option value="In what city or town did your mother and father meet?">In what city or town did your mother and father meet? </option>
                                    <option value="What was the last name of your third grade teacher?">What was the last name of your third grade teacher?</option>
                                    <option value="What time of the day were you born?">What time of the day were you born?</option>
                                    <option value="In what city or town was your first job?">In what city or town was your first job?</option>
                                    <option value="What was your favorite place to visit as a child?">What was your favorite place to visit as a child?</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="answer" class="inline">Answer</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="answer" name="answer" type="text" placeholder="Enter security question's answer" onblur="nonEmptyValidation(this);"/>
                                <small id='answerErr' class='error' style='display: none'></small>
                            </div>
                        </div>
                    </fieldset>

                    <br/>

                    <fieldset>
                        <legend>Personal Details</legend>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="icno" class="inline">IC No</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="icno" name="icno" type="text" placeholder="Enter your IC Number" onblur="validateIC(this);" />
                                <small id="icnoErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="firstname" class="inline">First name</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="firstname" name="firstname" type="text" placeholder="Enter your first name" onblur="validateName(this);" />
                                <small id="firstnameErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="lastname" class="inline">Last name</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="lastname" name="lastname" type="text" placeholder="Enter your last name" onblur="validateName(this);" />
                                <small id="lastnameErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="gender" class="inline">Gender</label>
                            </div>
                            <div class="large-8 columns">
                                <div class="row">
                                    <div class="large-4 large-offset-1 columns">
                                        <label for="gender" class="inline">
                                            <input name="gender" id="gender" type="radio" style="display: none" checked value='M'/>
                                            <span class="custom radio"></span>     Male
                                        </label>
                                    </div>
                                    <div class="large-4 left columns">
                                        <label for="gender" class="inline">
                                            <input name="gender" id="gender" type="radio" style="display: none" value='F'/>
                                            <span class="custom radio"></span>     Female
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="address" class="inline">Address</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="address" name="address" type="text" placeholder="Enter your current address" onblur="validateAdd(this);" />
                                <small id="addressErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="city" class="inline">City</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="city" name="city" type="text" placeholder="Enter your current city" onblur="validateStateOrCity(this);" />
                                <small id="cityErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="state" class="inline">State</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="state" name="state" type="text" placeholder="Enter your current state" onblur="validateStateOrCity(this);" />
                                <small id="stateErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="" class="inline">Postal code</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="postcode" name="postcode" type="text" placeholder="Enter your current postal code" onblur="validatePC(this);" />
                                <small id="postcodeErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="contactno" class="inline">Contact Number</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="contactno" name="contactno" type="text" placeholder="Enter your contact number" onblur="validateContact(this);" />
                                <small id="contactnoErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="dob" class="inline">Date of birth</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="dob" name="dob" type="text" placeholder="" onblur="" readonly/>
                                <small id="dobErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                    </fieldset>
                    <hr/>
                    <div class="row">
                        <div class="large-12 columns">
                            <input type="button" value="Register" class="right button" onclick="submitForm();"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <footer class="row">
            <div class="large-12 columns">
                <hr />
                <div class="row">
                    <div class="large-4 columns">
                        <p>&copy; Copyright 2013.</p>
                    </div>
                    <div class="large-6 columns">
                        <ul class="inline-list right">
                            <li><a href="aboutus.php">About Us</a></li>
                            <li><a href="contactus.php">Contact Us</a></li>
                            <li><a href="terms.php">Terms and Condition</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        <script src="js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>
